<template>
  <div >
    <detail-content-first :topModule="topModule" ></detail-content-first>
    <detail-content-second :houseFacilitys="houseFacilitys" :facilitySort="facilitySort" :ref="getRef"></detail-content-second>
    <detail-content-third :landlord="landlord" :ref="getRef"></detail-content-third>
    <detail-content-forth :comment="comment" :ref="getRef"></detail-content-forth>
    <detail-content-firth :longitude="longitude" :latitude="latitude" :ref="getRef"></detail-content-firth>
    <detail-content-sixth :introduction="introduction" :ref="getRef"></detail-content-sixth>
  </div>

  <div class="tab" v-if="show">
    <van-tabs v-model:active="active" @click-tab="onClickTab" swipeable >
      <van-tab v-for="title in item" :title="title" >
      </van-tab>
    </van-tabs>
  </div>

</template>

<script setup>
import DetailContentFirst from './DetailContentFirst.vue';
import DetailContentSecond from './DetailContentSecond.vue';
import DetailContentThird from './DetailContentThird.vue';
import DetailContentForth from './DetailContentForth.vue';
import DetailContentFirth from './DetailContentFirth.vue';
import DetailContentSixth from './DetailContentSixth.vue';
import { ref,onMounted} from 'vue';

  const props = defineProps({
      houseInfo: {
          type:Object,
          default: () =>({})
      }
  })

  const topModule = props.houseInfo.mainPart.topModule
  const houseFacilitys = props.houseInfo.mainPart.dynamicModule.facilityModule.houseFacility.houseFacilitys
  const facilitySort = props.houseInfo.mainPart.dynamicModule.facilityModule.houseFacility.facilitySort
  const landlord = props.houseInfo.mainPart.dynamicModule.landlordModule
  const comment = props.houseInfo.mainPart.dynamicModule.commentModule
  const longitude = props.houseInfo.mainPart.dynamicModule.positionModule.longitude
  const latitude = props.houseInfo.mainPart.dynamicModule.positionModule.latitude
  const introduction = props.houseInfo.mainPart.introductionModule.introduction

  const show = ref(false)

  window.addEventListener("scroll",() => {
    if (document.documentElement.scrollTop >document.documentElement.clientHeight -20) {
      show.value = true
    }
    else show.value = false
  })

  const item = ["顶部","房屋设置","房东介绍","热门评论","位置周边","价格说明"]
  const li = ref([])
  let values = []

  const getRef = (value) => {
    if (!value) return;
    li.value.push(value.$el)
  }

  let onTab = false
  let nowval = 0
  const active = ref(0)
  function onClickTab({name}) {
    nowval = name
    onTab = true
    let top =0
    if (active.value === 0)  top = 0
    else top =  li.value[active.value-1].offsetTop
    window.scrollTo(0,top-20)
  }


  onMounted(() => {
    values = li.value.map(item => item.offsetTop)
    values.unshift(0)
  })  

  window.addEventListener("scroll",()=>{
    if (nowval == active.value) onTab = false
    if (onTab) return
    const scrollTop = document.documentElement.scrollTop
    let index = 0
    for (let i = values.length-1;i>0;i--){
      if (values[i] <= scrollTop +30) {
        index = i
        break;
      }
    }
    active.value = index
  })

</script>

<style lang="less" scoped>
.tab {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
</style>